<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<title>无标题文档</title>
	<link href="/static/css/default.css" rel="stylesheet" type="text/css">
	<link href="/static/css/style/green.css" rel="stylesheet" type="text/css" id='link'>
	<link href="/static/js/datepicker/css/bootstrap-datepicker.css" rel="stylesheet">
</head>

<body style="padding:15px 8px 0px 8px;">



	<div class="classify">{$parenttitle}</div>

	<ul class="toolbar">
		<li>开始日期: <input type="text" style="width:120px;" class="forminput inputstyle" onfocus="WdatePicker()"
				id="stime" value=""></li>
		<li>结束日期: <input type="text" style="width:120px;" class="forminput inputstyle" onfocus="WdatePicker()"
				id="etime" value=""></li>
		<li>机构名称：<input type="text" style="width:120px;" class="forminput inputstyle" id="name" value=""></li>
		<li>联系人<input type="text" style="width:120px;" class="forminput inputstyle" id="truename" value=""></li>
		<li>状态

			<select type="text" id="state" class="select">
				<option value="">
					请选择
				</option>
				<option value='1'>正常</option>
				<option value='-1'>到期</option>
				<option value='0'>未审核</option>
			</select>
		</li>
		<li>即将到期
			<select type="text" id="daoqi" class="select">
				<option value="">
					请选择
				</option>
				<option value='1'>1</option>
				<option value='2'>2</option>
				<option value='3'>3</option>
				<option value='4'>4</option>
				<option value='5'>5</option>
				<option value='6'>6</option>
				<option value='7'>7</option>
				<option value='8'>8</option>
				<option value='9'>9</option>
				<option value='10'>10</option>
				<option value='11'>11</option>
				<option value='12'>12</option>
			</select>
			个月

		</li>
		<li><a href="#" class="selected" id="search">查询</a></li>
		<li><a href="#" class="selected" id="clear">重置</a></li>
		<li style="float:right"><a href="#" class="selected" id="export">导出</a></li>
	</ul>

	<!--toolbar start-->
	<ul class="toolbar">
		<li><a href="#" class="selected" id="add"><i class="toolico iconfont">&#xe649;</i>添加</a></li>


	</ul>
	<!--toolbar end-->

	<!--tablebox start-->
	<div class="tablebox" id="main">

		<table>

			<thead>
				<th class="num"></th>
				<th>机构编号</th>
				<th>机构名称</th>
				<th>联系人</th>
				<th>联系电话</th>
				<th>区域</th>
				<th>加入时间</th>
				<th>到期时间</th>
				<th>状态</th>
				<th>操作</th>

			</thead>

			<tbody>


				<tr v-for="uitem in arrayData">
					<td><input type="checkbox"></td>

					<td>{{uitem.number}}</td>
					<td>{{uitem.name}}</td>
					<td>{{uitem.truename}}</td>
					<td>{{uitem.phone}}</td>
					<td>{{uitem.province}}-{{uitem.city}}-{{uitem.area}}</td>
					<td>{{uitem.jointime}}</td>
					<td>{{uitem.endtime}}</td>
					<td>

						<span v-if="uitem.state==1">正常</span>
						<span v-if="uitem.state==0">未审核</span>
						<span v-if="uitem.state==-1">过期</span>

					</td>

					<td>
						<div class="am-btn-toolbar">
							<div class="am-btn-group am-btn-group-xs">
								<a v-on:click="video(uitem)">摄像头</a>
								<a v-on:click="chongzhi(uitem)">充值记录</a>
								<a v-on:click="vupdate(uitem)">修改</a>
								<a v-on:click="vdel(uitem)">删除</a>
								<a v-on:click="sh(uitem)" v-if="uitem.state==0">审核</a>
								<a @click="xuqi(uitem)" v-if="uitem.state!=0">续期</a>
								<a @click="xuqilist(uitem)" v-if="uitem.state!=0">续期记录</a>
							</div>
						</div>
					</td>
				</tr>
				</tr>



			</tbody>

		</table>

		<div class="pagination">
			<vue-nav :cur="cur" :all="all" :allcount="allcount" :callback="callback"></vue-nav>




		</div>
	</div>
	<!--tablebox end-->

	<!--pagination start-->


	<!--pagination end-->

</body>
<script type="text/javascript" src="/static/js/jquery.js"></script>
<script type="text/javascript" src="/static/js/common.js"></script>

<script src="/static/js/layer/layer.js"></script>

<script type="text/javascript" src="/static/js/vue2.js"></script>
<script type="text/javascript" src="/static/js/vue-nav.js"></script>
<script src="/static/My97DatePicker/WdatePicker.js"></script>
<script>
	var vm = new Vue({
		el: "#main",
		data: {
			cur: 1,
			all: 0,
			size: 10,
			allcount: 0,
			arrayData: [],

		},
		components: {
			'vue-nav': Vnav
		},
		methods: {
			video: function (uitem) {
				window.location.href = "/super/Mechanism/video?id=" + uitem.id;
			},
			chongzhi: function (uitem) {
				window.location.href = "/super/User/order?id=" + uitem.id;
			},
			xuqilist: function (uitem) {
				window.location.href = "/super/Mechanism/order?id=" + uitem.id;
			},
			getdata: function (_keycontent) {  //查询数据

				var self = this;
				var stime = $("#stime").val();
				var etime = $("#etime").val();
				var name = $("#name").val();
				var truename = $("#truename").val();
				var state = $("#state").val();
				var daoqi = $("#daoqi").val();


				$.post("/super/Mechanism/GetMechanism", { page: self.cur, size: self.size, stime: stime, etime: etime, name: name, truename: truename, state: state, daoqi: daoqi }, function (_result) {
					self.arrayData = _result.list;
					self.all = _result.count;
					self.allcount = _result.allcount
				});

			},
			callback: function (data) {

				var self = this;
				this.cur = data;
				var stime = $("#stime").val();
				var etime = $("#etime").val();
				var name = $("#name").val();
				var truename = $("#truename").val();
				var state = $("#state").val();
				var daoqi = $("#daoqi").val();
				$.post("/super/Mechanism/GetMechanism", { page: self.cur, size: self.size, stime: stime, etime: etime, name: name, truename: truename, state: state, daoqi: daoqi }, function (_result) {

					self.arrayData = _result.list;
					self.all = _result.count;
					self.allcount = _result.allcount
				});
			},
			sh: function (uitem) {

				//***************获取数据的方法1，使用jquery获取*****************

				parent.layer.open({
					type: 2,
					title: '审核',
					fixed: false, //不固定
					maxmin: true,
					area: ['600px', '500px'],
					content: '/super/Mechanism/sh?id=' + uitem.id
				});

			},
			xuqi: function (uitem) {

				//***************获取数据的方法1，使用jquery获取*****************

				parent.layer.open({
					type: 2,
					title: '续期',
					fixed: false, //不固定
					maxmin: true,
					area: ['600px', '500px'],
					content: '/super/Mechanism/xuqi?id=' + uitem.id
				});

			},
			vupdate: function (uitem) {

				//***************获取数据的方法1，使用jquery获取*****************

				parent.layer.open({
					type: 2,
					title: '信息修改',
					fixed: false, //不固定
					maxmin: true,
					area: ['850px', '500px'],
					content: '/super/Mechanism/Add?id=' + uitem.id
				});

			},
			vdel: function (uitem) {
				var self = this;
				parent.layer.confirm('确定要删除吗?', {
					btn: ['是', '否'] //按钮
				}, function () {
					$.post("/super/Mechanism/Del", { "id": uitem.id }, function (data) {
						if (data.status == 200) {
							parent.layer.msg(data.message);
							self.getdata("");
						} else {
							parent.layer.msg(data.message);
						}
					});
				}, function () {

				});

			}
		},
		created: function () {  //初始化事件里边去调用查询方法
			this.getdata("");
		}
	});

	!function () {
		$('#add').on('click', function () {

			parent.layer.open({
				title: '信息添加',
				type: 2,
				area: ['850px', '500px'],
				fixed: false, //不固定
				maxmin: true,
				content: '/super/Mechanism/Add'
			});
		});
	}();

	function msg(str) {
		layer.msg(str)
	}

	$("#search").click(function () {

		vm.getdata("");
	});
	$("#clear").click(function () {
		$("#stime").val("");
		$("#etime").val("");
		$("#name").val("");
		$("#truename").val("");
		$("#state").val("");
		$("#daoqi").val("");

	});
	$('#export').on('click', function () {
		var stime = $("#stime").val();
		var etime = $("#etime").val();
		var name = $("#name").val();
		var truename = $("#truename").val();
		var state = $("#state").val();
		var daoqi = $("#daoqi").val();

		window.open("/super/mechanism/exportmechanism?stime=" + stime + "&etime=" + etime + "&name=" + name + "&truename=" + truename+"&state="+state+"&daoqi="+daoqi);
	});
</script>

</html>